<template>
  <view class="content">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>

    <!-- 輪播圖 -->
    <u-swiper :list="list1" height="436.047rpx"></u-swiper>

    <view class="index_main">
      <!-- 個人信息（登錄成功狀態） -->
      <view class="user-info" style="position: relative">
        <view
          class="user_info__avatar_container"
          style="position: absolute; bottom: -80rpx"
        >
          <u-avatar
            class="user_info__avatar__img"
            :src="'/static/demo/avatar.png'"
            shape="square"
          ></u-avatar>

          <view class="user_info__name" style="margin-top: 10rpx">用戶名</view>
        </view>
      </view>

      <!-- 佔位符 -->
      <view style="height: 104.651rpx"> </view>

      <!-- 註冊會員 -->
      <view class="register_member">
        <view class="common_bold_text"> 登入LINE注冊會員 </view>
        <view class="register_vbtn"> 點擊註冊 </view>
      </view>

      <!-- 新人福利 -->
      <view class="new_member_benefits" @click="goNewMemberBenefits">
        <view class="new_member_benefits_text">新人福利</view>
        <view class="new_member_benefits_right"> 點擊領取 </view>
      </view>

      <!-- 下單方式 -->
      <view class="order_way">
        <!-- 左 -->
        <view class="order_way_left">
          <view class="common_btns">內用</view>
          <view class="common_desc" style="margin-top: 10rpx">
            小程序下單免排隊
          </view>
        </view>

        <!-- 右 -->
        <view class="order_way_right">
          <!-- 外帶 -->
          <view class="order_way_right_text">
            <view class="_order_way_right_main">
              <view class="common_btns">外帶</view>
              <view
                class="common_desc"
                style="margin-top: 10rpx; width: 197.093rpx; text-align: left"
              >
                提前下單到店自取
              </view>
            </view>
          </view>

          <!-- 外送 -->
          <view class="order_way_right_text">
            <!-- <view class="order_way_right_text_left">外送</view> -->
            <view class="_order_way_right_main">
              <view class="common_btns">外送</view>
              <view
                class="common_desc"
                style="margin-top: 10rpx; width: 197.093rpx; text-align: left"
              >
                美味送到家
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 積分有禮 -->
      <view class="integral_container"  @click="goIntegral">
        <view class="integral_header">
          <view class="common_bold_text">積分有禮</view>
          <view class="integral_actions">
            <view class="actions_text">詳情</view>
            <img :src="'./static/right_arrow.png'" alt="" />
          </view>
        </view>

        <view
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
          
        >
          <!-- 循環7次 -->
          <view class="integral_content"
            ><view
              class="integral_content_item"
              v-for="(item, index) in 7"
              :key="index"
            >
              <img
                :src="'./static/count.png'"
                alt=""
                class="count_image"
              /> </view
          ></view>

          <view class="integral_btn">去集點 </view>
        </view>
      </view>

      <!-- 菜單信息 -->
      <view class="menu_content">
        <view class="menu_content_item">
          <img
            :src="'./static/home/order_center.png'"
            alt=""
            class="order_center"
          />
          <text>訂單中心</text>
        </view>

        <view class="menu_content_item">
          <img :src="'./static/home/money.png'" alt="" class="money" />
          <text>餘額</text>
        </view>

        <view class="menu_content_item">
          <img :src="'./static/home/courpon.png'" alt="" class="courpon" />
          <text>優惠券</text>
        </view>

        <view class="menu_content_item" @click="goToStore">
          <img :src="'./static/home/store.png'" alt="" class="store" />
          <text>店面訊息</text>
        </view>
      </view>
    </view>
    <!-- #endif -->
    <f-tabbar></f-tabbar>
  </view>
</template>

<script>
import fTabbar from "@/components/module/f-tabbar/f-tabbar";
// #ifdef MP-WEIXIN
// 小程序流量主
import fAd from "@/components/module/f-ad/f-ad";
// #endif
export default {
  components: {
    fTabbar,
    // #ifdef MP-WEIXIN
    fAd,
    // #endif
  },
  data() {
    return {
      list1: [
        "https://cdn.uviewui.com/uview/swiper/swiper1.png",
        "https://cdn.uviewui.com/uview/swiper/swiper2.png",
        "https://cdn.uviewui.com/uview/swiper/swiper3.png",
      ],
    };
  },
  onLoad() {
    // 隐藏原生的tabbar
    uni.hideTabBar();
  },
  methods: {
    // 跳到个人中心页
    goUser() {
      uni.navigateTo({
        url: "/pages/user/user",
      });
    },
    // 跳到新人福利
    goNewMemberBenefits() {
      uni.navigateTo({
        url: "/pages/index/NewcomerBenefits/index",
      });
    },
    goToStore() {
      uni.navigateTo({
        url: "/pages/index/StoreInformation/index",
      });
    },
    // 去集點頁面
    goIntegral() {
      uni.navigateTo({
        url: "/pages/index/CollectPoints/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  height: 105%;
  background-color: #f9f9f9;
}

.content {
  height: 100%;
}

.user-info {
  margin-left: 22.674rpx;
}

.register_member {
  display: flex;
  align-items: center;
  padding-left: 29.651rpx;
  padding-right: 29.651rpx;
  justify-content: space-between;
  background: rgba(255, 255, 255, 1);
  height: 88.953rpx;
  border-radius: 26.163rpx;
}

.register_vbtn {
  width: 134.302rpx;
  height: 52.326rpx;
  border-radius: 104.651rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Microsoft Sans Serif";
  font-size: 22.674rpx;
  font-weight: 400;
  line-height: 123.837rpx;
  text-align: center;

  color: rgba(255, 255, 255, 1);
  background: rgba(0, 0, 0, 1);
}

.new_member_benefits {
  display: flex;
  align-items: center;
  padding-left: 43.605rpx;
  padding-right: 43.605rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 26.163rpx;

  height: 47.093rpx;
  margin-top: 10.465rpx;
  justify-content: space-between;

  .new_member_benefits_text {
    font-family: "Microsoft Sans Serif";
    font-size: 24.419rpx;
    font-weight: 400;
    line-height: 148.256rpx;
    text-align: left;
    color: rgba(0, 0, 0, 1);
  }

  .new_member_benefits_right {
    font-family: "Microsoft Sans Serif";
    font-size: 24.419rpx;
    font-weight: 400;
    line-height: 148.256rpx;
    text-align: left;

    color: rgba(77, 77, 77, 1);
  }
}

.order_way {
  margin-top: 10.465rpx;

  display: flex;
  justify-content: space-between;
  height: 383.721rpx;

  .order_way_left {
    width: 293.023rpx;
    height: 383.721rpx;
    background: rgba(255, 255, 255, 1);
    border-radius: 26.163rpx;

    padding-top: 34.884rpx;

    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .order_way_right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .order_way_right_text {
      width: 387.209rpx;
      height: 181.395rpx;
      background: rgba(255, 255, 255, 1);
      border-radius: 26.163rpx;

      padding-top: 34.884rpx;
      padding-left: 34.884rpx;
    }
  }
}

.integral_container {
  margin-top: 10.465rpx;
  //   height: 141.279rpx; //81
  padding-left: 29.651rpx;
  padding-right: 29.651rpx;
  padding-top: 20.651rpx;
  padding-bottom: 10.651rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 26.163rpx;

  .integral_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .integral_actions {
    display: flex;
    align-items: center;
    .actions_text {
      font-family: "Microsoft Yi Baiti";
      font-size: 20.93rpx;
      font-weight: 400;
      line-height: 55.814rpx;
      text-align: center;
      color: rgba(133, 133, 133, 1);
    }

    img {
      width: 6.977rpx;
      height: 13.953rpx;
      margin-left: 10rpx;
    }
  }
}

.integral_content {
  display: flex;
}
.count_image {
  width: 68.023rpx;
  height: 68.023rpx;
}

.integral_btn {
  width: 127.326rpx;
  height: 59.302rpx;

  border-radius: 5.233rpx;

  display: flex;
  justify-content: center;
  align-items: center;

  color: rgba(255, 255, 255, 1);
  font-family: "Microsoft Yi Baiti";
  font-size: 24.419rpx;
  font-weight: 400;
  line-height: 66.279rpx;
  text-align: center;

  background: rgba(36, 118, 173, 1);
}

.menu_content {
  display: flex;

  padding: 29.651rpx;

  background: rgba(255, 255, 255, 1);
  border-radius: 26.163rpx;

  margin-top: 10.465rpx;
  justify-content: space-between;

  .menu_content_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    img {
      width: 73.256rpx;
      height: 55.814rpx;
    }

    .order_center {
      width: 62.791rpx !important;
      height: 55.814rpx !important;
    }

    .money {
      width: 73.256rpx;
      height: 64.535rpx;
    }

    .store {
      width: 64.535rpx;
      height: 64.535rpx;
    }

    .courpon {
      width: 71.512rpx;
      height: 64.535rpx;
    }

    text {
      font-family: "Microsoft Sans Serif";
      font-size: 24.419rpx;
      font-weight: 400;
      line-height: 26.163rpx;
      text-align: center;
      color: rgba(36, 118, 173, 1);
      margin-top: 19.186rpx;
    }
  }
}
</style>
